<template>
  <div class="content">
    <div @click="itemClick(item.id)" v-for="item in dataList" :key="item.id">
      <record-item>
        <ul slot="item-left">
          <li class="item-title">{{item.transactionName}}</li>
          <li>
            <span>项目ID:</span>
            <span>{{item.content}}</span>
          </li>
          <li>{{item.createdTime}}</li>
        </ul>
        <div slot="item-right" class>
          <strong class="item-money-add" v-if="item.type===1">
            <span>+</span>
            <span>{{item.money}}</span>
          </strong>
          <strong class="item-money-sub" v-else-if="item.type===2">
            <span>-</span>
            <span>{{item.money}}</span>
          </strong>
        </div>
      </record-item>
    </div>
  </div>
</template>

<script>
import RecordItem from "./RecordItem"
export default {
  components: {
    RecordItem
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    itemClick(id) {
       this.$emit('recordDetail',id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/common.scss";
.content {
  li {
    margin-bottom: 10px;
    color: $text-color6;
    font-size: $font-size24;
  }
  li:last-child {
    margin-bottom: 0;
  }
  li.item-title {
    font-size: $font-size-30;
    color: $text-color3;
  }
  .item-money-add {
    font-size: $font-size24;
    color: $font-color-blue;
  }
  .item-money-sub {
    font-size: $font-size24;
    color: $font-color-red;
  }
}
</style>
